{% extends "base.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% load static %}
{% load time_str from core_tags %}
{% load fmttime_str from core_tags %}

{% block title %}Site: {{ object.entity_id }}{% endblock %}

{% block content %}
<div class="container">

  {% include "core/_breadcrumbs.html" %}

  <div class="card mb-3">
    <div class="card-body">
      {% if tags_form %}
        {% include "core/_tags.html" with form_title='Add Tag' nodecor=True section_tag='h2' section_title=object.description section_subtitle_name='Entity id:' section_subtitle=object.entity_id form=tags_form items=tags head_tags=head_tags %}
        {% if head_tags %}
          {% include "core/_head_tags.html" with form=tags_form items=head_tags %}
        {% endif %}
      {% else %}
        <h2>Site {{ object.description }}</h2>
      {% endif %}
    </div>
  </div>

  {% include "core/_site_chart.html" with site_id=object.entity_id %}

  {% load render_table from django_tables2 %}

  <div class="card mb-3">
    <div class="card-body">
      <h3>
        <div class="row m-0">
          <div class="">
            Meters
          </div>
          <div class="text-right flex-grow-1">
            <a class="btn btn-primary" href="{% url 'core:meter_create' object.entity_id %}"><i class="fa fa-plus"></i> Add Meter</a>
          </div>
        </div>
      </h3>
      <div class="container header-top">
          {% for meter in meters %}
            <h6 class="meter-row">
                <div class="container">
                    <div class="row">
                      <div class="col-4">
                        <div><a href="{% url 'core:meter_detail' meter.meter_id %}">{{ meter.meter_id }}</a></div>
                      </div>
                      <div class="col-4">
                        {{ meter.description }}
                      </div>
                      <div class="col-4">
                        {% if meter.latest_reading %}
                          <b>{{ meter.latest_reading.value }} {{ meter.latest_reading.uom.unit }}</b>
                          as of
                          <my-datetime value="{{ meter.latest_reading.as_of_datetime|time_str }}">{{ meter.latest_reading.as_of_datetime|fmttime_str }}</my-datetime>
                        {% endif %}
                      </div>
                    </div>
                </div>
            </h6>
          {% endfor %}
      </div>
    </div>
  </div>

  <div id="datetimelist">
    <div class="card mb-3">
      <div class="card-body">
        <h3>
          <div class="row m-0">
            <div class="">
              Equipment
            </div>
            <div class="text-right flex-grow-1">
              <a class="btn btn-primary" href="{{ link_add_url }}"><i class="fa fa-plus"></i> Add Equipment</a>
            </div>
          </div>
        </h3>
        <div class="container header-top">
        {% for e in equipments %}
            <h5 class="card-title"></h5>

            <h6 class="equip-row position-relative" >
              <b-container>
                <b-row class="text-left">
                  <b-col cols="9">
                    <a href="{% url 'core:site_equipment_detail' e.site.entity_id e.equipment.entity_id  %}">{{ e.equipment.description }}</a>
                  </b-col>
                  <b-col cols="2">
                    <div class="a-rt">{{ e.data_points }} Data Points</div>
                  </b-col>
                  <b-col class="text-right chev-btn" v-b-toggle.collapse_datapoints{{ forloop.counter }}>
                    <b-button variant="light" size="sm" class="a-rt when-opened">
                       <i class="fa fa-chevron-up"></i>
                    </b-button>
                    <b-button variant="light" size="sm" class="a-rt when-closed">
                       <i class="fa fa-chevron-down"></i>
                    </b-button>
                  </b-col>
                </b-row>
              </b-container>
            </h6>

            <b-collapse v-cloak id="collapse_datapoints{{ forloop.counter }}" v-on:show="show_collapse('collapse_datapoints{{ forloop.counter }}', '{{e.equipment.entity_id}}')">
              <p>Loading ...</p>
            </b-collapse>

        {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {% if has_transactions %}
    {% url 'core:site_transactions_table' object.entity_id as site_transactions_url %}
    {% include "core/_ajax_table.html" with title="Transactions" name="transactions" table_url=site_transactions_url %}
  {% endif %}

  {% if file_upload_form %}
    {% include "core/_upload.html" with form_title='Upload File' link_form_title='Add Link' form=file_upload_form items=files %}
  {% endif %}

  {% if notes_form %}
    {% include "core/_notes.html" with form_title='Add Note' form=notes_form items=notes %}
  {% endif %}

  {% if bacnet_configs %}
  <div class="card mb-3">
    <div class="card-body">
      <h3>
        <div class="row m-0">
          <div class="">
            BACNet Configs
          </div>
          <div class="text-right flex-grow-1">
            <form method="POST" action="{% url 'core:topic_list' %}">
              {% csrf_token %}
              <input type="hidden" name="site" value="{{ object.object_id }}"/>
              <button class="btn btn-info " type="submit">Topics</button>
              <a class="btn btn-info" href="{% url 'core:topic_export' object.entity_id %}"><i class="fa fa-download"></i> Export</a>
            </form>
          </div>
        </div>
      </h3>
      <div class="header-top">
          {% for bc in bacnet_configs %}
            <h6 class="bacnet-row" >
              <div class="row">
                <div class="col-3">
                  <div>{{ bc.prefix }}</div>
                </div>
                <div class="col-3">
                {% if bc.bc_equipment_entity_id %}
                    <a href="{% url 'core:site_equipment_detail' object.entity_id bc.bc_equipment_entity_id  %}">{{ bc.bc_equipment_description }}</a>
                {% else %}
                  <a class="btn btn-primary" href="{{ link_add_url }}?bacnet_prefix={{ bc.prefix }}&device_id={{ bc.device_id }}"><i class="fa fa-plus"></i> Add Equipment</a>
                {% endif %}
                </div>
                <div class="col-6 text-right">
                  <form method="POST" action="{% url 'core:topic_list' %}">
                    {% csrf_token %}
                    <input type="hidden" name="bacnet_prefix" value="{{ bc.prefix }}"/>
                    <input type="hidden" name="site" value="{{ object.object_id }}"/>
                    <button class="btn btn-info" type="submit">Topics</button>
                    <a class="btn btn-info" href="{% url 'core:topic_export' object.entity_id %}?bacnet_prefix={{ bc.prefix }}"><i class="fa fa-download"></i> Export</a>
                    <a class="btn btn-info" href="{% url 'core:topictagruleset_runform' %}?topic_filter={{ bc.prefix }}"><i class="fa fa-cog mr-2"></i>Run Rules</a>
                  </form>
                </div>
              </div>
            </h6>
          {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

</div>
<script>
(function(){
  new Vue({
    delimiters: ['${', '}'],
    el: '#datetimelist',
    methods: {
      show_collapse(container_id, equipment_id) {
        container = document.getElementById(container_id)
        container.innerHTML = '<p>Loading ...</p>'
        url = dutils.urls.resolve('equipment_data_points_table', { id: equipment_id })
        axios.get(url).then(response => {
          container.innerHTML = response.data
        });
      }
    }
  });
})();
</script>
{% endblock content %}
